<template>
  <el-form :model="evalPlan" class="planForm" ref="form" label-width="130px" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="评价方案名称" prop="internalPlanName">
          <el-input
            :style="fixedWidth"
            v-model="evalPlan.internalPlanName"
            placeholder="请输入评价方案名称"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="评价方案类型" prop="internalPlanType">
          <el-select
            @change="handleTypeChange"
            clearable
            v-model="evalPlan.internalPlanType"
            :style="fixedWidth"
          >
            <el-option :value="1" label="科间互评" />
            <el-option :value="2" label="科内互评" />
            <el-option :value="3" label="评上级领导" />
            <!-- <el-option :value="4" label="自定义" /> -->
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="方案周期" prop="internalPlanCycle">
          <el-select clearable v-model="evalPlan.internalPlanCycle" :style="fixedWidth">
            <el-option :value="0" label="临时任务" />
            <el-option :value="2" label="周任务" />
            <el-option :value="3" label="月任务" />
            <el-option :value="4" label="季度任务" />
            <el-option :value="5" label="年任务" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="顺延工作日天数">
          <el-input type="number" :style="fixedWidth" v-model="evalPlan.delay" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="方案开始日期" prop="startDate">
          <el-date-picker
            type="date"
            :style="fixedWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="evalPlan.startDate"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="方案结束日期">
          <el-date-picker
            type="date"
            :style="fixedWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="evalPlan.endDate"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="评价方形式" prop="executorMode">
          <el-select
            clearable
            :disabled=" evalPlan.internalPlanType !== 4   "
            v-model="evalPlan.executorMode"
            :style="fixedWidth"
          >
            <el-option :value="1" label="指定部门" />
            <el-option :value="2" label="指定岗位" />
            <el-option :value="3" label="指定人员" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="被评价方形式"
          prop="targetMode"
          :rules="evalPlan.internalPlanType !== 4 ? [] : rules.targetMode"
        >
          <el-select
            clearable
            :disabled=" evalPlan.internalPlanType !== 4 "
            v-model="evalPlan.targetMode"
            :style="fixedWidth"
          >
            <el-option :value="1" label="指定部门" />
            <el-option :value="2" label="指定岗位" />
            <el-option :value="3" label="指定人员" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="evalPlan.internalPlanType === 3">
        <el-form-item label="管理岗是否参选" prop="managerPost">
          <el-select clearable v-model="evalPlan.managerPost" :style="fixedWidth">
            <el-option :value="0" label="否" />
            <el-option :value="1" label="是" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getEvalSchemeAll } from '@/api/eval'

export default {
  data() {
    return {
      fixedWidth: {
        width: '246px'
      },
      evalPlan: {
        internalPlanName: null,
        internalPlanType: null,
        internalPlanCycle: null,
        delay: null,
        executorMode: null,
        startDate: null,
        endDate: null,
        state: null,
        targetMode: null,
        managerPost: null
      },
      rules: {
        internalPlanName: [{ required: true, message: '请输入考评评价方案名称', trigger: 'blur' }],
        internalPlanType: [{ required: true, message: '请选择评价方案类型', trigger: 'change' }],
        internalPlanCycle: [{ required: true, message: '请选择方案周期', trigger: 'change' }],
        startDate: [{ required: true, message: '请选择任务开始时间', trigger: 'blur' }],
        executorMode: [{ required: true, message: '请选择考评方', trigger: 'change' }],
        targetMode: [{ required: true, message: '请选择被考评方', trigger: 'blur' }],
        managerPost: [{ required: true, message: '请选择管理岗是否参选', trigger: 'blur' }]
      },
      saveSecondArr: [],
      formData: [],
      templateCheck: false,
      type: this.$route.params.type
    }
  },
  computed: {
    getEndDate() {
      return this.evalPlan.endDate
    },
    getStartDate() {
      return this.evalPlan.startDate
    },
    getTargetMode() {
      return this.evalPlan.targetMode
    },
    // executorMode
    getExecutorMode() {
      return this.evalPlan.executorMode
    },
    getPlanType() {
      return this.evalPlan.internalPlanType
    }
  },
  watch: {
    getEndDate: {
      handler(n, o) {
        if (n !== o && n) {
          const startDate = new Date(this.evalPlan.startDate).getTime()
          const endDate = new Date(this.evalPlan.endDate).getTime()
          if (endDate - startDate < 0) {
            this.$message.error('结束时间不能小于开始时间')
            this.$set(this.evalPlan, 'endDate', null)
          }
        }
      },
      deep: true
    },
    getStartDate: {
      handler(n, o) {
        if (n !== o && n) {
          if (this.evalPlan.endDate) {
            const startDate = new Date(this.evalPlan.startDate).getTime()
            const endDate = new Date(this.evalPlan.endDate).getTime()
            if (startDate - endDate > 0) {
              this.$message.error('开始时间不能大于结束时间')
              this.$set(this.evalPlan, 'startDate', null)
            }
          }
        }
      },
      deep: true
    },
    getTargetMode: {
      handler(n, o) {
        if (n && n !== o) {
          this.$emit('targetMode', n)
        }
      },
      deep: true
    },
    getExecutorMode: {
      handler(n, o) {
        console.log('getExecutorMode n', n)
        if (n && n !== o) {
          this.$emit('executorMode', n)
        }
      },
      deep: true
    },
    getPlanType: {
      handler(n, o) {
        if (n !== 4) {
          // 考评方设置为指定部门
          this.$set(this.evalPlan, 'executorMode', 1)
        } else {
          this.$set(this.evalPlan, 'executorMode', null)
          this.$set(this.evalPlan, 'targetMode', null)
        }

        if (n === 1) {
          this.$set(this.evalPlan, 'targetMode', 1)
        } else {
          this.$set(this.evalPlan, 'targetMode', null)
        }

        this.$emit('planType', n)
      },
      deep: true
    }
  },
  async mounted() {
    const res = await getEvalSchemeAll()
    if (res && res.data.length > 0) {
      this.formData = res.data
    }
  },
  methods: {
    handleTypeChange(val) {
      console.log('val', val)
    },
    saveArr(arr) {
      this.saveSecondArr = [...arr]
    },
    setObj(obj) {
      this.evalPlan = Object.assign({}, obj)
    },
    postData() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('postData', true, this.evalPlan, 1)
          return false
        }
        this.$emit('notSubmit', 1)
      })
    }
  }
}
</script>

<style scoped>
.el-select >>> .el-input.is-disabled .el-input__inner {
  cursor: default;
  background-color: #ffffff;
  color: #333333;
}
</style>
